<template>
	<view class="page">
		<accountHeader title="授权信息" jumpTo="/pages/smartKey/myKeys">
			<template #right>
				<u-icon name="list" @click="pageTo('/pages/smartKey/applyForOther')" width="30px" height="30px" src=""></u-icon>
			</template>
		</accountHeader>
		<view class="page-main">
			<view v-for="(item,index) in keyList" class="box">
				<h3>授权{{index}}</h3>
				<view class="f-jcsb">
					<view>
						<h4>被授权人账号</h4>
						<p>{{item.username}}</p>
					</view>
					<u-button class="btn" @click="cancel(item.id)">取消授权</u-button>
				</view>
				<view>
					<h4>授权时间</h4>
					<p>{{item.startTime}} -- {{item.expirationTime}}</p>
				</view>
				<view>
					<h4>授权权限</h4>
					<view class="f-jcsb" style="justify-content: start;">
						<u-button :class="{active:item.switchLock}" class="btn type">
							<b v-if="item.switchLock" @click="switchLock()">解锁</b>
							<p v-if="!item.switchLock">闭锁</p>
						</u-button>
						<u-button :class="{active:item.switchTrunk}" class="btn type" @click="switchTrunk()">
							<p v-if="item.switchTrunk">开启后备箱</p>
							<p v-if="!item.switchTrunk">关闭后备箱</p>
						</u-button>
						<u-button :class="{active:item.switchingEngine}" class="btn type">
							<p v-if="item.switchingEngine" @click="switchingEngine()" >启动发动机</p>
							<p v-if="!item.switchingEngine">停用发动机</p>
						</u-button>
					</view>
				</view>
				<view>
					<h4>备注</h4>
					<p>{{item.remark}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import accountHeader from "@/components/acountHeader.vue"
	import {getList,getListByID} from "@/config/api/carKeys.js"
	import {cancelAuthorization} from "@/config/api/carKeys.js"
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				keyId:'',
				keyList:'',
			}
		},
		methods:{
			switchLock(){
				console.log("锁状态改变")
			},
			switchTrunk(){
				console.log("后备箱状态改变")
			},
			switchingEngine(){
				console.log("发动机状态改变")
			},
			pageTo(url){
				uni.navigateTo({
					url: url
				})
			},
			cancel(id){
				cancelAuthorization(id).then((res)=>{
					this.keyLists();
				})
			},
			keyLists(){
				console.log("===");
				getListByID(this.keyId).then((res)=>{
					this.keyList = res.rows
				})
			}
			
		},
		onLoad(e){
			console.log(e);
			this.keyId = e.keyId
		},
		onShow(){
			console.log(111);
			// 获取授权钥匙列表
			this.keyLists()
		}
	}
</script>

<style scoped>
	/* 页面 */
	.page{
		margin-top: 10%;
		padding:5%;
	}
	/* 页面主体 */
	.page-main{
		margin-top: 40px;
	}

	.page-main h4{
		font-size: 14px;
		color: gainsboro;
	}

	/* 列表 */
	.box{
		margin-bottom: 20px;
		border-bottom: 1px solid gainsboro;
	}
	.box>*{
		margin: 10px 0;
	}

	/* 弹性布局 */
	.f-jcsb{
		display: flex;
		justify-content: space-between;
	}

	/* 按钮样式 */
	.btn{
		font-size: 20rpx;
		color: white;
		background-color: #555555;
		width: 100px;
		border-radius: 100rpx;
		margin: 0;
	}

	/* 灰色按钮 */
	.btn.type{
		font-size: 14rpx;
		width: 70px;
		background-color: #6d6d6d;
		height: 30px;
		margin: 10px 15px;
	}
	.btn.type.active{
		background-color: #0055ff;
	}
</style>
